import React from "react";
import { compMap } from "./config";
import { v4 as uuid } from "uuid";
import { connect } from "react-redux";
import "./index.scss";
import { ADD_CMS_COMPONENT } from "store/constants";

interface ICompControlProps {
    title: string;
    compList: string[];
    wrapper?: boolean;
    addComponent: (payload: any) => void;
}
const CompControl: React.FC<ICompControlProps> = (props) => {
    const { title, compList, wrapper = false } = props;
    const addComponent = (itemConf: any) => {
        props.addComponent({
            wrapper,
            config: {
                id: uuid(),
                component: itemConf.component,
                props: itemConf.props || {},
                children: [],
                columnProps: itemConf?.columnProps
            }
        })
    }
    return <div className="control-wrapper">
        <span className="control-title">{title}</span>
        <ul className="control-list">
            {
                compList.map(item => {
                    const itemConf = Reflect.get(compMap, item);
                    if(!itemConf) return null;
                    return (<li className="control-item" onClick={() => addComponent(itemConf)}>
                        <div className="control-conver"><img src={itemConf.icon} alt="" /></div>
                        <span>{itemConf.title}</span>
                     </li>)
                })
            }
        </ul>
    </div>
}

export default connect(null, (dispatch: any) => {
    return {
        addComponent: (payload: any) => {
            dispatch({type: ADD_CMS_COMPONENT, payload})
        }
    }
})(CompControl);